<template>
    <div class="madp-customer-list-detail">
        <basic-container>
            <el-page-header @back="goBack" content="客户详情"></el-page-header>
        </basic-container>
        <basic-container>
            <div class="madp-basic-title">基础信息</div>
            <div class="madp-basic-box">
                <el-row>
                    <el-col class="basic-box-left">
                        <div class="img">
                            <img :src="userInfo.avatar" :onerror="`src='/img/${userInfo.gender === 1 ? 'male' : 'female'}.png'`" alt />
                        </div>
                        <div class="name">{{ userInfo.name }}</div>
                        <div class="weixin">
                            <i class="el-icon-female" />
                            <span>@{{ userInfo.typeText }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12" class="basic-box-right">
                        <el-form label-width="120px">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="客户号:">
                                        <span v-if="userInfo.businessNo !== ''">{{ userInfo.businessNo }}</span>
                                        <span v-else>无</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="所属企业:">
                                        <span v-if="userInfo.corpName !== ''">{{ userInfo.corpName }}</span>
                                        <span v-else>无</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="性别:">
                                        <span v-if="userInfo.genderText !== ''">{{ userInfo.genderText }}</span>
                                        <span v-else>无</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="职位:">
                                        <span v-if="userInfo.position !== ''">{{ userInfo.position }}</span>
                                        <span v-else>无</span>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="类型:">
                                        <span>{{ userInfo.typeText }}</span>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                    </el-col>
                </el-row>
            </div>
            <div class="madp-basic-title">关联信息</div>
            <el-table :data="tableList" class="madp-table" border style="width: 100%">
                <el-table-column label="所属成员" prop="employeeName"></el-table-column>
                <el-table-column label="客户来源" prop="addWayText"></el-table-column>
                <el-table-column label="标签" prop="tags">
                    <template slot-scope="scope">
                        <div v-if="scope.row.tags.length == 0">--</div>
                        <div v-else>
                            <el-tag style="margin-top:5px" v-for="(item, index) in scope.row.tags" :key="index">{{ item }}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="描述" prop="description">
                    <template slot-scope="scope">
                        <span v-if="scope.row.description !== ''">{{ scope.row.description }}</span>
                        <span v-else>--</span>
                    </template>
                </el-table-column>
                <el-table-column label="时间" prop="createTime"></el-table-column>
                <el-table-column label="备注的企业名称" prop="remarkCorpName">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.remarkCorpName">--</span>
                        <span v-else>{{ scope.row.remarkCorpName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注的手机号码" prop="remarkMobiles">
                    <template slot-scope="scope">
                        <span v-if="!scope.row.remarkMobiles">--</span>
                        <span v-else>{{ scope.row.remarkMobiles }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark"></el-table-column>
                <el-table-column label="互动轨迹">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleQuery(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="madp-center-box">
                <div class="madp-left">
                    <div class="madp-basic-title">用户画像</div>
                    <div class="madp-user-photo" v-if="showChart">
                        <b class="madp-investment-preference">投资偏好</b>
                        <div id="madp-chart-pie" class="madp-pie-wrap"></div>
                    </div>
                    <div class="madp-user-photo" v-show="!showChart">
                        <el-empty description="暂无数据" :image-size="100"></el-empty>
                    </div>
                </div>
                <div class="madp-left">
                    <div class="madp-basic-title">所属群聊</div>
                    <div class="madp-group-chat">
                        <div v-if="items.length > 0">
                            <el-tag v-for="(item, index) in items" :key="index" style="margin-bottom:15px;margin-left:15px">{{ item }}</el-tag>
                        </div>
                        <div v-else class="madp-no-data madp-no-chat">
                            <el-empty description="暂无数据" :image-size="100"></el-empty>
                        </div>
                    </div>
                </div>
            </div>
            <el-dialog title="互动轨迹" :visible.sync="dialogVisible" width="50%" :before-close="handleClose" :close-on-click-modal="false">
                <div class="madp-pane-wrapper">
                    <el-timeline>
                        <div v-if="trackList.length > 0">
                            <el-timeline-item :color="theme" v-for="item in trackList" :key="item.id">
                                {{ item.createTime }}
                                <p class="madp-pane-color">{{ item.content }}</p>
                            </el-timeline-item>
                        </div>
                        <div v-else class="madp-no-data">
                            <img class="madp-no-link" src="/img/nodata.png" alt />
                            <div>暂无轨迹</div>
                        </div>
                    </el-timeline>
                    <div class="madp-track-page" v-if="trackList.length > 0">
                        <el-button @click="getMoreList" v-if="isMoreShow">加载更多</el-button>
                        <span v-else>没有更多了</span>
                    </div>
                </div>
            </el-dialog>
        </basic-container>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import echarts from 'echarts';
require('echarts/theme/macarons');
import { basicInfo, linkInfo, synTrack, editContactNo } from '@/api/madp-customer/madp-customer-new';
export default {
    props: {
        detailMsg: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            // 用户信息
            userInfo: {},
            // 客户id
            businessNo: '',
            // 弹窗开关
            dialogVisible: false,
            items: [], // 群聊数据
            tableList: [], // 表格list
            trackList: [], // 表格数据
            isMoreShow: false, // 显示更多
            trackObj: {}, // 数据
            trackPage: {
                current: 1,
                size: 10,
                total: 0
            },
            showChart: true, // 显示图表
            chartInfo: {
                //显示在上面的文字
                tooltip: {
                    trigger: 'item',
                    //formatter: "{a}<br/>{b}: <br/>{c}({d}%)", // 其中 {a}指向name名称（访问来源）
                    formatter: '{b}: <br/>{c}({d}%)'
                },
                legend: {
                    show: false,
                    data: ['股票基金', '非标固收', '债券基金', '股权基金'],
                    orient: 'vertical',
                    bottom: 10,
                    left: 'center',
                    top: 'bottom',
                    orient: 'horizontal'
                },
                series: [
                    {
                        left: 'center',
                        name: '偏好',
                        type: 'pie',
                        //圆圈的粗细
                        radius: ['30%', '50%'],
                        //圆圈的位置
                        center: ['50%', '50%'],
                        data: [],
                        // 定义饼状图的引导线
                        labelLine: {
                            // show: false // 让环形引导线不展示
                            length: 10, //引导线第一段长度
                            length2: 8 //引导线第二段长度
                        },
                        //动画持续时间:2秒
                        animationDuration: 2000,
                        //控制是否显示指向文字的,默认为true
                        label: {
                            show: true,
                            //以下代码可以代表指向小文字的
                            formatter: '{b}{d}%',
                            textStyle: {
                                color: '#333',
                                fontSize: 11
                            }
                        },
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 100,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        };
    },
    computed: {
        ...mapGetters(['theme'])
    },
    mounted() {
        this.getLinkInfo();
        this.getBasicInfo();
    },
    methods: {
        // 返回
        goBack() {
            this.$emit('goBack');
        },
        // 绘制图表
        drawPieChart() {
            this.chartPie = echarts.init(document.getElementById('madp-chart-pie'), 'macarons');
            this.chartPie.setOption(this.chartInfo);
        },
        //获取基础信息
        getBasicInfo() {
            console.log('detailMsg', this.detailMsg);
            let obj = {
                id: this.detailMsg.id,
                custNo: this.detailMsg.custNo
            };
            basicInfo(obj).then((res) => {
                if (res.data.code != 0) return;
                this.userInfo = res.data.data;
                this.items = res.data.data.roomList;
                if (res.data.data.customerAssetsInfoVO) {
                    this.showChart = true;
                    this.chartInfo.series[0].data = [
                        {
                            value: res.data.data.customerAssetsInfoVO.amPlanBal,
                            name: '资管计划'
                        },
                        {
                            value: res.data.data.customerAssetsInfoVO.deptBal,
                            name: '存款'
                        },
                        {
                            value: res.data.data.customerAssetsInfoVO.finProdBal,
                            name: '理财产品余额'
                        },
                        {
                            value: res.data.data.customerAssetsInfoVO.fundBal,
                            name: '基金余额'
                        },
                        {
                            value: res.data.data.customerAssetsInfoVO.insureBal,
                            name: '保险余额'
                        },
                        {
                            value: res.data.data.customerAssetsInfoVO.loanBal,
                            name: '贷款余额'
                        },
                        {
                            value: res.data.data.customerAssetsInfoVO.metalBal,
                            name: '贵金属余额'
                        },
                        {
                            value: res.data.data.customerAssetsInfoVO.trustBal,
                            name: '信托'
                        }
                    ];
                    this.drawPieChart();
                } else {
                    this.showChart = false;
                }
            });
        },
        // 获取表格数据
        getLinkInfo() {
            let params = {
                id: this.detailMsg.id
            };
            linkInfo(params).then((res) => {
                this.tableList = res.data.data.records;
            });
        },
        // 获取客户互动轨迹
        getSynTrack() {
            let data = {
                contactId: this.trackObj.contactId,
                employeeId: this.trackObj.employeeId,
                current: this.trackPage.current,
                size: this.trackPage.size
            };
            synTrack(data).then((res) => {
                if (res.data && res.data.code === 0) {
                    let { records, pages, current, size, total } = res.data.data;
                    if (current === 1) {
                        this.trackList = [].concat(records);
                    } else {
                        this.trackList = this.trackList.concat(records);
                    }

                    this.trackPage = {
                        pages,
                        current,
                        size,
                        total
                    };
                    if (current < pages) {
                        this.isMoreShow = true;
                    } else {
                        this.isMoreShow = false;
                    }
                }
            });
        },
        // 获取更多数据
        getMoreList() {
            this.trackPage.current += 1;
            this.getSynTrack();
        },
        // 关闭
        handleClose() {
            this.dialogVisible = false;
        },
        // 查询
        handleQuery(row) {
            this.dialogVisible = true;
            this.trackObj = row;
            this.getSynTrack();
        }
    }
};
</script>
<style lang="scss" scoped>
.el-icon-edit {
    margin-left: 10px;
}
.madp-customer-list-detail {
    height: calc(100% - 20px);
    padding-bottom: 0;
    overflow: auto;
    .madp-basic-box {
        padding: 15px;
        border: 1px solid #ccc;
        .basic-box-left {
            width: 240px;
        }
        .basic-box-right {
            max-width: 800px;
            min-width: 450px;
            padding: 15px 0 0 0;
        }
    }
    .img {
        width: 150px;
        height: 150px;
        img {
            border-radius: 50%;
            width: 150px;
            height: 150px;
        }
    }
    .name {
        padding: 10px;
        width: 150px;
        text-align: center;
    }
    .weixin {
        width: 150px;
        text-align: center;
        span {
            margin-top: 8px;
            color: #1dce7b;
            margin-right: 10px;
        }
    }
}
.madp-basic-title {
    border: 1px solid #ccc;
    width: fit-content;
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
    padding: 0 10px;
}
.madp-table {
    border: 1px solid #ccc;
}
.madp-basic-info {
    height: 36px;
    line-height: 36px;
    font-size: 14px;
}
.madp-row-label {
    display: inline-block;
    margin: 0 200px;
}
.madp-row-add {
    margin: 0 228px 0 200px;
}
.madp-center-box {
    display: flex;
    justify-content: space-between;
}
.madp-left {
    width: 49%;
}
.madp-user-photo {
    padding-top: 10px;
    border: 1px solid #ccc;
    height: 234px;
}
.madp-group-chat {
    vertical-align: middle;
    padding-top: 10px;
    border: 1px solid #ccc;
    height: 234px;
}
.madp-pie-wrap {
    width: 100%;
    height: 200px;
    margin: 0 auto;
}
.madp-investment-preference {
    font-weight: 500;
    margin-left: 13px;
    margin-top: 15px;
}
.madp-pane-wrapper {
    padding: 10px;
    .el-timeline-item {
        padding-bottom: 0;
    }
}
.madp-track-page {
    display: flex;
    justify-content: center;
}
.madp-pane-color {
    background: #eee;
    padding: 10px;
}
.madp-no-data {
    text-align: center;
}
.madp-no-link {
    width: 80px;
    height: 80px;
}
</style>
